<template>
  <view class="product-list">
    <view
      v-for="(item, index) in productList"
      :key="index"
      class="product-item p-2"
    >
      <view>
        <v-image
          width="100%"
          height="100%"
          border-radius="30rpx"
          :src="item.image"
          mode="widthFix"
        />
      </view>
      <view class="product-info p-2">
        <view class="product-main text-ellipsis">
          {{ item.productName }}
        </view>
        <view class="product-car text-ellipsis flex justify-between">
          <view style="line-height: 46rpx">
            {{ `¥${item.productPrice}` }}
          </view>
          <v-icon size="36rpx" src="@/static/icons/gouwuche.svg" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps<{
  productList: {
    image: string;
    productName: string;
    productPrice: string;
  }[];
}>();
</script>

<style scoped lang="scss">
.product-list {
  columns: 2;
  column-gap: 44rpx;
  padding: 0 24rpx 12rpx;

  .product-item {
    display: flex;
    flex-direction: column;
    // width: 296rpx;
    // max-height: 468rpx;
    background: rgba(255, 255, 255, 1);
    border-radius: 40rpx;
    gap: 24rpx;
    break-inside: avoid;
    margin-bottom: 40rpx;
  }

  .product-info {
    display: flex;
    font-size: 22rpx;
    font-weight: bold;
    flex-direction: column;
    gap: 4rpx;
    // margin-top: 24rpx;

    .product-main {
    }
    .product-car {
    }
  }
}
</style>
